<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加用户</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form">
					<div class="layui-form-item">
						<label class="layui-form-label">用户名</label>
						<div class="layui-input-block">
							<input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
						</div>
					</div>			
					<div class="layui-form-item">
						<label class="layui-form-label">邮箱</label>
						<div class="layui-input-block">
							<input type="email" name="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
						</div>
					</div>	
					<div class="layui-form-item">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-block">
							<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
						</div>
					</div>			
					<div class="layui-form-item">
						<label class="layui-form-label">分配角色</label>
						<div class="layui-input-block">
							<div id="assignRoles" class="xm-select-demo"></div>
						</div>
					</div>	
					<div class="layui-form-item">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-block">
							<input type="radio" name="status" value="1" title="可用" checked>
							<input type="radio" name="status" value="0" title="不可用">
						</div>
					</div>
					<div class="layui-form-item" style="text-align: right;">
						<div class="layui-input-block">
							<button type="submit" class="layui-btn" lay-submit lay-filter="add">添加</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../component/js/xm-select.js"></script>
		<script>
			layui.use(function(){

				let form = layui.form;
				let layer = layui.layer;
				let $ = layui.$;

				$.getJSON('http://127.0.0.1:8080/getAllRole', function(res){
					if(res.code==0){
						xmSelect.render({
							el: '#assignRoles',
							prop: {
								name: 'roleName',
								value: 'roleId'
							},
							data: res.data,
							filterable: true,
							name: 'roleList'
						});
					}else{
						layer.msg(res.msg);
					}
				});

				form.on('submit(add)', function(obj){
					let user = obj.field;
					let roleListStr = user.roleList;
					let roleListArr = roleListStr.split(",");
					let roleList = [];
					if(roleListArr && roleListArr.length>0){
						for (let i = 0; i < roleListArr.length; i++) {
							let role = {};
							role.roleId = roleListArr[i];
							roleList.push(role);
						}
					}
					user.roleList=roleList;

					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8080/addUser',
						data: JSON.stringify(user),
						contentType: 'application/json',
						dataType: 'json',
						success: function(res){
							if(res.code==0){
								let index = parent.layer.getFrameIndex(window.name);
								parent.layer.close(index);
							}else{
								layer.msg(res.msg);
							}
						}
					});
					return false;
				});

			});
		</script>
	</body>
</html>
